<template>
  <div class="content-box" style="padding-top: 10px">
    <page-header>
      <div v-permission="{ action: 'edit' }" class="btn" @click="handleSave()">
        <i class="iconfont icon-dui"></i>保存
      </div>
    </page-header>
    <search-top-form
      class="search-form"
      :search-form="searchObj.searchForm"
      :search-item="searchObj.searchItem"
      @handle-search="handleSearch"
      @handle-reset="handleReset"
    ></search-top-form>
  </div>
  <el-form ref="formRef" :model="searchObj" :validate-on-rule-change="true" class="my-form-box2">
    <div v-for="(item, index) in searchObj.tableList" :key="index" class="content-box df aic">
      <div v-for="(v, i) in tableHeaders" :key="i" class="item df aic">
        <template v-if="v.key != 'parameterValue'">
          <div class="label">{{ v.name }}:</div>
          <div class="text">{{ item[v.key] }}</div>
        </template>
        <template v-else>
          <el-form-item
            v-if="item?.editWay == '1'"
            label="参数值:"
            :prop="'tableList.' + index + '.parameterValue'"
            :rules="[{ required: true, message: '参数值不能为空', trigger: 'blur' }]"
          >
            <el-input-number
              v-if="item?.dataType == '2'"
              v-model.number="item[v.key]"
              :min="1"
              :disabled="item?.allowModification == '0' ? true : false"
              placeholder="请输入参数值"
            ></el-input-number>
            <el-input-number
              v-else-if="item?.dataType == '3'"
              v-model.number="item[v.key]"
              :precision="2"
              :disabled="item?.allowModification == '0' ? true : false"
              placeholder="请输入参数值"
            ></el-input-number>
            <el-input
              v-else
              v-model="item[v.key]"
              :maxlength="item?.dataLength || 100"
              :disabled="item?.allowModification == '0' ? true : false"
              placeholder="请输入参数值"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-else
            label="参数值:"
            :prop="'tableList.' + index + '.parameterValue'"
            :rules="[{ required: true, message: '参数值不能为空', trigger: 'blur' }]"
          >
            <el-select
              v-model="item[v.key]"
              placeholder="请选择参数值"
              :disabled="item?.allowModification == '0' ? true : false"
            >
              <el-option
                v-for="select in searchObj.defaultSelectList"
                :key="select.code"
                :label="`${select.code} - ${select.name}`"
                :value="select.code"
              />
            </el-select>
          </el-form-item>
        </template>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="ts" name="SystemParams">
import type { FormInstance } from 'element-plus'
import { tableHeaders, searchItem } from './config'
import { editUserSubmit } from './api'
import { useProxy } from '@/utils/proxy'
import { setSystemParams } from '@/utils/config'
const { proxy } = useProxy()
const formRef = ref<FormInstance>()
// 搜索对象
const searchObj = reactive({
  searchForm: { parameterCode: null, parameterName: null },
  searchItem,
  defaultSelectList: [
    { code: '0', name: '不启用' },
    { code: '1', name: '启用' }
  ],
  tableList: [
    { parameterCode: '1', editWay: '2' },
    { parameterCode: '2', editWay: '1' }
  ] as any
})
// 搜索
const handleSearch = () => {
  getList()
}
const handleReset = () => {
  searchObj.searchForm = { parameterCode: null, parameterName: null }
  handleSearch()
}
// 获取列表数据
const getList = () => {
  searchObj.tableList = []
  proxy.$api
    .getParamsList<any>({
      ...searchObj.searchForm
    })
    .then((res) => {
      searchObj.tableList = res.data.map((v: any) => {
        if (v.editWay == '1' && v.dataType == '2') {
          v.parameterValue = Number(v.parameterValue)
        }
        return v
      })
      setSystemParams(res.data)
    })
}
// 保存
const handleSave = async () => {
  await formRef.value?.validate(async (valid) => {
    if (valid) {
      let idStr = searchObj.tableList.map((v: any) => v.id)
      let parameterValueStr = searchObj.tableList.map((v: any) => v.parameterValue)
      await editUserSubmit({ idStr, parameterValueStr })
      proxy.$message.msgSuccess('保存成功')
      getList()
    }
  })
}
const init = () => {
  getList()
}
init()
</script>

<style lang="scss" scoped>
.content-box {
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  padding: 18px;
  padding-bottom: 0px;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-bottom: 9px;
  .item {
    font-size: 16px;
    color: #333333;
    width: 25%;
    margin-bottom: 17px;
    .label {
      margin-right: 6px;
    }
  }
}
.my-form-box2 {
  :deep(.is-required .el-form-item__label::before) {
    display: none;
  }
  :deep(.el-form-item) {
    margin-bottom: 0px;
  }
}
</style>
